<template>
	<view class="page">
		<custom-navigation :title="title" rightTxt="保存" @rightAction="save">
		</custom-navigation>
		<scroll-view class="body-scroll" scroll-y="true">
			<view class="item-contianer flex-column">

				<view class="item flex-row-center">
					<view class="title"> 云喇叭名称： <text class="x">*</text></view>

					<input placeholder="请输入云喇叭名称" placeholder-class="input-hint" v-model="info.device_name" />
				</view>
				<picker :value="deviceModeIndex" :range="deviceModeNames" @change="e=>deviceModeIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">设备品牌： <text class="x">*</text></view>
						<view :class="deviceModeIndex!=-1?'value':'hint'">
							{{deviceModeNames[deviceModeIndex]||'请选择设备品牌'}}
							<image src="/static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>

				<picker :value="deviceTypeIndex" :range="deviceTypeNames" @change="e=>deviceTypeIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">设备类型： <text class="x">*</text></view>
						<view :class="deviceTypeIndex!=-1?'value':'hint'">{{deviceTypeNames[deviceTypeIndex]||'请选择'}}
							<image src="/static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>




				<view class="item flex-row" style="height: 150rpx;">
					<view class="title">设备编号： <text class="x">*</text> </view>

					<input placeholder="请扫描或输入设备号" placeholder-class="input-hint" v-model="info.sn"
						style="margin-top: 30rpx;" />
					<image src="/static/qrcode.png" class="qrcode-img" @click="qrcodeClick" style="margin-top: 36rpx;">
					</image>
					<view class="snhint"> {{'\n*扫描设备条形码\n，自动录入SN编号'}}</view>
				</view>

				<view class="item flex-row-center">
					<view class="title"> 设备密钥： </view>

					<input placeholder="请输入设备密钥" placeholder-class="input-hint" v-model="info.secret_key" />
				</view>





				<picker :value="remarkIndex" :range="promptcashNames" @change="e=>remarkIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">收银语音提示： <text class="x">*</text></view>
						<view :class="remarkIndex!=-1?'value':'hint'">{{promptcashNames[remarkIndex]||'请选择'}}
							<image src="/static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>
				<picker :value="queueIndex" :range="promptqueueNames" @change="e=>queueIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">排队语音提示： <text class="x">*</text></view>
						<view :class="queueIndex!=-1?'value':'hint'">{{promptqueueNames[queueIndex]||'请选择'}}
							<image src="/static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>

				<!-- <view class="item flex-row-center">
					<view class="title" style="flex: 1;">默认值： <text class="x">*</text></view>
					 <switch change="true" color="rgba(56, 192, 158, 1)"></switch>
				</view> -->

				<view class="item flex-row" style="height: 150rpx;">
					<view class="title">音量设置： <text class="x">*</text> </view>
					<slider :value="vol" v-model="vol" show-value style=" height: 20rpx;width: 600rpx;padding-right: 0;"
						activeColor="rgba(56, 192, 158, 1)" block-size="16" />
					<view class="snhint"> {{'*云喇叭音量：0是最小声音，100是最大声音'}}</view>
				</view>

			</view>

		</scroll-view>




		<view class="bottom-btn flex-column" v-if="info.id!=null">
			<view class="flex-row-center" style="margin-left: 24rpx;justify-content: center;1">
				<view class="item2" @click="dialogType(0)" style="margin-right: 120rpx;">删除</view>
				<view class="item1" @click="dialogType(1)">播放测试</view>
			</view>

		</view>

		<alert :show="dialogShow" :message="dialogMessage" @leftAction="dialogShow=false" @rightAction="dialogConfirm">
		</alert>



	</view>
</template>

<script>
	import dsBridge from 'dsbridge'
	export default {

		data() {
			return {
				isDefault:true,
				title: '新增云喇叭',
				vol: 50,
				printTestDialogShow: false,
				type: 0,
				dialogShow: false,
				dialogMessage: "是否确定上架所选商品？",
				extensionShow: false,
				stateIndex: 0,
				stateList: ["生效", "禁用", "挂失"],
				ddhkIndex: 0,
				ddhkList: [{
					name: '自动出单',
					check: true
				}, {
					name: '手动打印'
				}],
				info: {
					// "device_name": "54654", //名称
					// "device_type": "print", //类型
					// "type_name": "云打印", //类型名称
					// "device_model": "XH202210210017", //设备 model_no
					// "model_name": "商米云打印", //设备 model_name
					// "model_code": "16", // 设备 model_no
					// "equipment_type": "门店云打印设备",
					// "equipment_model": "云打印",
					sn: "", //编号
					// "device_state": "正常", //设备专题
					// "bill_type": "商品标签打印",
					// "print_length": 55.0,

					// "secret_key": "14654646",
					// "online_state": "离线",
					// "bind_state": "未绑定",
					// "bill_mode": "自动打印"
				},
				deviceModes: [], //品牌列表
				deviceModeNames: [],
				deviceModeIndex: -1,

				deviceTypes: [], //品牌列表
				deviceTypeNames: [],
				deviceTypeIndex: -1,
				printLengthIndex: 0,
				printLengthIndex: -1,
				deviceStateIndex: -1,
				deviceStateNames: ['正常', '禁用'],
				remarkIndex: -1,
				queueIndex: -1,
				promptcashNames: ['不提示','提示收款方式+实收金额'],
				promptqueueNames: ['不提示','提示当前叫号+取号码'],
			}

		},
		onLoad(options) {
			this.getDeviceModeList()
			this.getDeviceTypeList()
			let jsonstr = uni.getStorageSync("loudspeaker_info");
			let loudspeaker_info = JSON.parse(jsonstr)
			if (loudspeaker_info != null) {
				this.title = "编辑云喇叭"
				uni.setStorageSync("loudspeaker_info", null)
				this.info = {
					id: loudspeaker_info.id,
					"device_name": loudspeaker_info.device_name, //名称
					device_model: loudspeaker_info.device_model,
					model_name: loudspeaker_info.model_name,
					model_code: loudspeaker_info.model_code,
					device_type: loudspeaker_info.device_type,
					type_name: loudspeaker_info.type_name,
					voice_prompt_cash: loudspeaker_info.voice_prompt_cash,
					voice_prompt_queue: loudspeaker_info.voice_prompt_queue,
					"sn": loudspeaker_info.sn, //编号
					"device_state": loudspeaker_info.device_state,
					"type_name": loudspeaker_info.type_name,
					secret_key: loudspeaker_info.secret_key,
					loudspeaker_type: "门店云喇叭",
					bind_state: "未绑定",
					enable_coll_voice: "是",
					online_state: "离线",
					store_no: loudspeaker_info.store_no,
				}

				for (let i in this.deviceStateNames) {
					if (this.info.device_state == this.deviceStateNames[i]) {
						this.deviceStateIndex = i
					}
				}
				for (let i in this.promptcashNames) {
					if (this.info.voice_prompt_cash == this.promptcashNames[i]) {
						this.remarkIndex = i
					}
				}
				for (let i in this.promptqueueNames) {
					if (this.info.voice_prompt_queue == this.promptqueueNames[i]) {
						this.queueIndex = i
					}
				}
			}
		},

		methods: {
			confirmEntry() {},
			dialogConfirm() {
				this.dialogShow = false
				if (this.type == 0) this.del()
				else if (this.type == 1) //是否确认测试打印？
					// this.printTestDialogShow = true;
					this.testPlay();
				else if (this.type == 2) //是否确认测试打印？
					this.cancel()

			},
			dialogType(type) {
				if (type == 0) //删除
					this.dialogMessage = '是否确定删除云喇叭？';
				else if (type == 1) //是否确认测试打印？
					this.dialogMessage = '是否确认测试云喇叭？';
				else if (type == 2) //是否确认测试打印？
					this.dialogMessage = '是否确定取消所有未打印订单？';

				this.dialogShow = true;
				this.type = type;
			},
			testPlay(){
				uni.showLoading({
					title: "测试中..."
				})
				console.error(this.info);
				this.$apiPost("/retail/operate/srvls_device_play", [{
					"serviceName": "srvls_device_play",
					"data": [{
						"store_no": this.info.store_no,
						"sn": this.info.sn,
						"soundContent": this.info.voice_prompt_cash,
						"price":1,
						"payType":"ali_pay"
					}]
				}]).then(res => {
					uni.hideLoading()
					if (res.state == 'SUCCESS') {
						this.$showToast("成功");
					}
				})
				
			},
			cancel() {
				uni.showLoading({
					title: "删除中..."
				})
				this.$apiPost("/retail/operate/srvls_device_print_cancel", [{
					"serviceName": "srvls_device_print_cancel",
					"data": [{
						"store_no": "店铺编号",
						"sn": "设备编号"
					}]
				}]).then(res => {
					uni.hideLoading()
					if (res.state == 'SUCCESS') {
						this.$showToast("成功");
						uni.setStorageSync("refresh", true)
						uni.navigateBack()
						setTimeout(() => {}, 1500)
					}
				})
			},
			del() {
				uni.showLoading({
					title: "删除中..."
				})
				this.$apiPost("/retail/operate/srvdev_device_loudspeaker_delete", [{
					"serviceName": "srvdev_device_loudspeaker_delete",
					"condition": [{
						"colName": "id",
						"ruleType": "in",
						"value": this.info.id
					}]
				}]).then(res => {
					uni.hideLoading()
					if (res.state == 'SUCCESS') {
						this.$showToast("成功");
						uni.setStorageSync("refresh", true)
						uni.navigateBack()
						setTimeout(() => {}, 1500)
					}
				})
			},
			qrcodeClick() {
				let ths = this;
				
				dsBridge.call("QRCode", {}, function(res) {
					if (res) {
						ths.info.sn = "" + res
						
					}
				})
			},
			save() {
				let hint = null;
				if ((this.info.device_name ?? '').length == 0) {
					hint = "请输入打印机名称"
				} else if ((this.info.sn ?? '').length == 0) {
					hint = "请输入设备编号"
				} else if (this.deviceModeIndex == -1) {
					hint = "请选择设备品牌"
				} else if (this.deviceTypeIndex == -1) {
					hint = "请选择设备类型"
				}
				if (hint?.length > 0) {
					this.$showToast(hint)
					return;
				}
				this.info.device_model = this.deviceModes[this.deviceModeIndex].model_no
				this.info.model_name = this.deviceModes[this.deviceModeIndex].model_name
				this.info.model_code = this.deviceModes[this.deviceModeIndex].model_code
				this.info.device_type = this.deviceTypes[this.deviceTypeIndex].device_type
				this.info.type_name = this.deviceTypes[this.deviceTypeIndex].type_name
				this.info.voice_prompt_cash = this.promptcashNames[this.remarkIndex]
				this.info.voice_prompt_queue = this.promptqueueNames[this.queueIndex]
				this.info.loudspeaker_type = "门店云喇叭"
				this.info.device_state = this.deviceStateNames[this.deviceStateIndex]
				this.info.bind_state = "未绑定"
				this.info.enable_coll_voice = "是"
				this.info.online_state = "离线"
				let url = this.info.id ? "/retail/operate/srvdev_device_loudspeaker_update" :
					"/retail/operate/srvdev_device_loudspeaker_add"
				this.$apiPost(url, [{
					"serviceName": this.info.id ? "srvdev_device_loudspeaker_update" :
						"srvdev_device_loudspeaker_add",
					"condition": this.info.id ? [{
						"colName": "id",
						"ruleType": "eq",
						"value": this.info.id
					}] : [],
					"data": [this.info]
				}]).then(res => {
					if (res.state == "SUCCESS") {
						uni.showToast({
							title: "成功！",
							mask: true
						})
						if(this.info.id ==null){//新增设置默认
							this.setttingDefalut(this.info.sn)
							return 
						}
						uni.setStorageSync("refresh", true)
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
						
						
					}

				})
			},
			setttingDefalut(sn) {
				uni.showLoading({
					title: "加载中..."
				})
			
				this.$apiPost("/retail/operate/srvdev_device_loudspeaker_defult_update", [{
					"serviceName": "srvdev_device_loudspeaker_defult_update",
					"data": [{
						"whether_defult": "是"
					}],
					"condition": [{
						"colName": "sn",
						"ruleType": "eq",
						"value": this.info.sn
					}]
				}]).then(res => {
					this.page = 1;
					uni.hideLoading()
					uni.setStorageSync("refresh", true)
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				})
			},
			getDeviceModeList() {
				this.$apiPost("/retail/select/srvsys_device_model_select", {
					"serviceName": "srvsys_device_model_select",
					"colNames": [
						"*"
					],
					"condition": [{
						"colName": "device_type",
						"ruleType": "eq",
						"value": "sound"
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 220
					}
				}).then(res => {
					this.deviceModes = res.data;
					let list = [];
					for (let i in this.deviceModes) {
						let item = this.deviceModes[i];
						list.push(item.model_name);
						if (this.info.model_code == item.model_code) {
							this.deviceModeIndex = i;
						}
					}
					this.deviceModeNames = list;

				})
			},
			getDeviceTypeList() {
				this.$apiPost("/retail/select/srvdev_device_type_select", {
					"serviceName": "srvdev_device_type_select",
					"colNames": [
						"*"
					],
					"condition": [{
						"colName": "device_type",
						"value": "sound",
						"ruleType": "eq"
					}]
				}).then(res => {
					this.deviceTypes = res.data;
					let list = [];
					for (let i in this.deviceTypes) {
						let item = this.deviceTypes[i];
						list.push(item.type_name);
						if (this.info.type_name == item.type_name) {
							this.deviceTypeIndex = i;
						}
					}
					this.deviceTypeNames = list;

				})
			},
			switchVipPrice() {
				this.isVipPrice = !this.isVipPrice;
			},
			switchallow_min_sales_price() {
				if (this.allow_min_sales_price == '允许')
					this.allow_min_sales_price = '不允许';
				else
					this.allow_min_sales_price = '允许';
			},
			itemRadioCheck(item, list) {
				for (var i in list) {
					list[i].check = false;
				}
				item.check = true
			},
			itemCheckbox(item) {
				item.check = !(item.check ?? false)
			},
			imgsClick(current, urls) {
				uni.previewImage({
					current,
					urls
				})
			},
			addImage() { //  事件名称  （自定义）
				// let count = 3 - this.imgs.length
				uni.chooseImage({
					count: count, //  上传图片数量的控制
					success(res) {
						let tempfilepaths = res.tempfilepaths //  图片的本地文件路径列表
						tempfilepaths.forEach((item, index) => {
							if (index < count) { // 处理H5 端，多选的情况  （只有小于 count 才会被push 到数组里面）
								this.imgs.push({ // push 对象到  imageLists[] 数组里面
									url: item
								})
							}
						})
					}
				})
				let ths = this;
				dsBridge.call("chooseImage", {
					count: 1, //数量
					sourceType: "", //不填全部 album 从相册选图，camera 使用相机
				}, function(tempFilePaths) {
					alert(JSON.stringify(ret));
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.apprightbtn {
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		padding: 0 50rpx;
	}

	.title {
		min-width: 188rpx;
		box-sizing: content-box;
		padding: 28rpx 0 24rpx 24rpx;

		.line1 {
			margin-right: 14rpx;
			width: 0rpx;
			height: 26rpx;
			border: 4rpx solid #38C09E;
			border-radius: 4rpx;
		}

		text {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			font-weight: 500;
		}

		.show1 {
			margin-left: 12rpx;
			padding: 8rpx 14rpx;
			border-radius: 8rpx 0 0 8rpx;
			background: rgba(56, 192, 158, 1);
			border: 1px solid rgba(56, 192, 158, 1);
			font-size: 24rpx;
			font-weight: 500;
			color: white;
		}

		.hide1 {
			margin-left: 14rpx;
			font-size: 24px;
			font-weight: 500;
			color: white;
			font-size: 24rpx;
			font-weight: 500;
			color: black;
			padding: 8rpx 14rpx;
			border-radius: 8rpx 0 0 8rpx;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(229, 229, 229, 1);
		}

		.show2 {
			padding: 8rpx 14rpx;
			border-radius: 0 8rpx 8rpx 0;
			background: rgba(56, 192, 158, 1);
			border: 1px solid rgba(56, 192, 158, 1);
			font-size: 24rpx;
			font-weight: 500;
			color: white;
		}

		.hide2 {

			font-size: 24px;
			font-weight: 500;
			color: white;
			font-size: 24rpx;
			font-weight: 500;
			color: black;
			padding: 8rpx 14rpx;
			border-radius: 0 8rpx 8rpx 0;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(229, 229, 229, 1);
		}

	}

	.vip-hint {
		height: 76rpx;
		line-height: 76rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(212, 48, 48, 1);
		margin-left: 26rpx;
	}


	.item-contianer {
		width: 100%;
		background-color: #FFFFFFFF;
		box-sizing: border-box;

		.imgs {
			margin-top: 32rpx;
			margin-right: 24rpx;
			margin-bottom: 22rpx;
			box-sizing: content-box;

			image {
				width: 160rpx;
				height: 160rpx;
				margin-left: 24rpx;
			}
		}

		.item {
			min-height: 100rpx;
			border-bottom: 2rpx solid #F5F5F7;
			padding-right: 28rpx;
			position: relative;

			.qrcode-img {
				width: 36rpx;
				height: 36rpx;
			}

			.camera-img {
				width: 68rpx;
				height: 68rpx;
			}

			.snhint {
				position: absolute;
				bottom: 25rpx;
				left: 26rpx;
				font-size: 30rpx;
				font-weight: 500;

				color: rgba(153, 153, 153, 1);
			}

			.check-box {}

			.title {
				color: rgba(16, 16, 16, 1);
				padding-left: 24rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);

				.x {
					color: #D43030;
					font-size: 32rpx;
				}
			}

			.mealedit {
				font-size: 30rpx;
				font-weight: 700;
				color: rgba(56, 192, 158, 1);
			}

			.hint {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);

				image {
					height: 16rpx;
					width: 8rpx;
				}
			}

			.value {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);

				image {
					height: 16rpx;
					width: 8rpx;
				}
			}

			.unit {
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
			}

			.qrinput {
				flex: 1;
				text-align: right;
				margin-right: 12rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-weight: 700;
			}

			.qrimg {
				width: 64rpx;
				height: 64rpx;

			}

			input {
				flex: 1;
				text-align: right;
				margin-right: 12rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-weight: 500;
			}

			.input-hint {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
			}



			.btn {
				padding: 0 8rpx;
				height: 54rpx;
				line-height: 54rpx;
				margin-left: 6rpx;
				border-radius: 12rpx;
				background: rgba(56, 192, 158, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 30rpx;
				font-weight: 500;
				text-align: center;
			}

			.radio-group {
				flex-wrap: wrap;

				.radio {
					min-width: 150rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
					}
				}
			}

			.check-box-group {
				padding-top: 28rpx;
				padding-bottom: 24rpx;

				.check-box1 {

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(102, 102, 102, 1);
					}
				}
			}


		}

		.meal-box {
			padding-bottom: 24rpx;
			padding-right: 24rpx;
			min-height: 202rpx;
			width: 648rpx;
			margin-left: 28rpx;
			border: 2rpx solid rgba(224, 224, 224, 1);

			.empty {
				margin-top: 62rpx;
				margin-left: 138rpx;
				width: 376rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				border: 2rpx solid rgba(153, 153, 153, 1);
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
			}

			.value {
				margin-top: 24rpx;
				margin-left: 16rpx;
				/** 文本1 */
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.item-vip {
			height: 100rpx;
			padding-right: 28rpx;


			.title {
				color: rgba(16, 16, 16, 1);
				padding-left: 24rpx;
				padding-top: 24rpx;
				font-size: 32rpx;
				font-weight: 700;

			}

			.value {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}


			input {
				flex: 1;
				text-align: right;
				margin-right: 12rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-weight: 500;
			}

			.input-hint {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
			}

			.vip-switch {
				width: 100rpx;
				height: 54rpx;
			}


		}

		.vip-price-box {
			margin: 0 28rpx 32rpx 28rpx;
			background-color: rgba(245, 245, 247, 1);
			box-sizing: content-box;
			border-right: 1rpx solid rgba(245, 245, 247, 1);
			border-bottom: 1rpx solid rgba(245, 245, 247, 1);

			.item1 {
				flex: 1;
				padding: 20rpx 0;
				line-height: 40rpx;
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
				background-color: white;
				margin: 1rpx;
			}

			input {
				flex: 1;
				text-align: center;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				min-height: 80rpx;
				font-weight: 500;
				background-color: white;
				margin: 1rpx;
			}

			.input-hint {
				font-size: 28rpx;
				font-weight: 500;
				padding: 20rpx 0;
				line-height: 40rpx;
				text-align: center;
				color: rgba(153, 153, 153, 1);
			}
		}

	}

	.bottom-btn {
		justify-content: center;
		width: 100%;
		padding-top: 34rpx;
		padding-bottom: 34rpx;
		background: rgba(255, 255, 255, 1);

		.btn {
			width: 320rpx;
			height: 80rpx;
			border-radius: 40px;
			background: rgba(56, 192, 158, 1);
			border: 2px solid rgba(56, 192, 158, 1);
			line-height: 80rpx;
			text-align: center;
			color: white;
		}

		.item2 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #333333FF;
			min-width: 192rpx;
			padding: 0 20rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;

		}

		.item1 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid rgba(56, 192, 158, 1);
			background-color: rgba(56, 192, 158, 1);
			color: white;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.text {
			flex: 1;
			margin-left: 60rpx;
			font-size: 30rpx;
			font-weight: 700;

		}

	}




	.dialog-container {
		width: 750rpx;
		box-sizing: border-box;
		border-radius: 40rpx 40rpx 0 0;
		background: rgba(255, 255, 255, 1);


		.title-box {
			height: 100rpx;
			width: 100%;
			position: relative;
			border-bottom: 2rpx solid rgba(225, 225, 225, 1);
			margin-bottom: 54rpx;

			view {
				font-size: 36rpx;
				font-weight: 700;
				line-height: 100rpx;
				text-align: center;
				width: 100%;
				color: rgba(51, 51, 51, 1);
			}

			image {
				width: 72rpx;
				height: 72rpx;
				position: absolute;
				right: 10rpx;
				top: 20rpx;
			}
		}


		.preview {
			margin-top: 14rpx;
			margin-left: 64rpx;
			padding-top: 30rpx;
			width: 622rpx;
			border: 2rpx solid rgba(153, 153, 153, 1);

			.name {
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(102, 102, 102, 1);
			}

			.qrcode {
				margin-bottom: 20rpx;
				width: 472rpx;
				height: 244rpx;
				background: url(https://img.js.design/assets/img/636d13cdef439e62ddee10a8.png#7180a265c6bb217d4d8124e66e7240ec);
				background-size: 100% 100%;
			}
		}

		.previewhint {
			margin-top: 22rpx;
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			font-weight: 700;
			color: rgba(102, 102, 102, 1);
		}



		.r {
			padding-left: 44rpx;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);

			input {
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 5rpx;
				text-align: center;
				opacity: 1;
				border-radius: 4rpx;
				border: 1px solid rgba(153, 153, 153, 1);
			}

			.value {
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 12rpx;
				padding: 0 54rpx;
				border: 2rpx solid rgba(153, 153, 153, 1);
				box-sizing: content-box;

				image {

					margin-left: 50rpx;
					width: 40rpx;
					height: 10rpx;
				}

			}

			.radio-group {
				flex-wrap: wrap;

				.radio {
					min-width: 230rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
					}
				}
			}
		}

		.bottom-box {
			margin-top: 55rpx;
			border-top: 2rpx solid rgba(224, 222, 222, 1);

			.cancel {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(56, 192, 158, 1);
				background-color: white;
				border-right: 2rpx solid rgba(224, 222, 222, 1);
			}

			.confirm {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(51, 51, 51, 1);
				background-color: white;

			}
		}
	}

	.showDialog {
		animation: showDialog 0.3s ease-out;
	}

	// 呼吸帧
	@keyframes showDialog {
		0% {
			transform: translate(0%, 100%);
		}

		100% {
			transform: translate(0%, 0%);
		}

	}
</style>
